<template>
  <div>
    <el-date-picker v-model="date" type="date" placeholder="开课日期" :picker-options="dateOptions" value-format="yyyy-MM-dd" @change="updateValue" />
    <el-time-picker
      v-model="time"
      is-range
      format="HH:mm"
      range-separator="至"
      start-placeholder="开课时间"
      end-placeholder="结束时间"
      placeholder="选择开课时间"
      value-format="HH:mm"
      @change="updateValue"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          date: '',
          time_slot: ['', '']
        };
      }
    }
  },
  data() {
    return {
      date: this.value.date,
      time: this.value.time_slot[0] == '' ? '' : this.value.time_slot,
      dateOptions: {
        disabledDate: function(time) {
          return time.getTime() + 8.64e7 < Date.now();
        }
      }
    };
  },
  watch: {
    value: {
      handler(newValue) {
        this.date = this.value.date;
        this.time = this.value.time_slot;
      },
      deep: true
    }
  },
  methods: {
    updateValue: function() {
      // let dateTime = [this.date + ' ' + this.time[0], this.date + ' ' + this.time[1]];
      this.$emit('update:value', {
        date: this.date,
        time_slot: this.time
      });
    }
  }
};
</script>

<style></style>
